<template>
	<scroll-view class="bg-color">
		<form>
			<view class="cu-form-group">
				<view class="title cuIcon-friendfamous text-brown">客户姓名</view>
				<input placeholder="请输入客户姓名" v-model="record.name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title cuIcon-phone text-red">客户电话</view>
				<input placeholder="请输入客户电话" v-model="record.tel"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-color text-color '>
						+86
					</view>
					<view class="cu-tag line-color">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title cuIcon-deliver text-yellow">车辆型号</view>
				<input placeholder="请输入车辆型号" v-model="record.carType"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title cuIcon-cuIcon text-green">车牌号码</view>
				<input placeholder="请输入车牌号码" v-model="record.carNumber"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title cuIcon-newshotfill text-purple">车架号码</view>
				<input placeholder="请输入车架号码" v-model="record.vin"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title cuIcon-barcode text-mauve">卷轴编号</view>
				<input placeholder="请输入卷轴编号" v-model="record.scrollNumber"></input>
			</view>
			<view class="cu-form-group align-start">
				<view class="title ">
					<text class="cuIcon-list text-pink">产品分类</text>
				</view>
				<view class="action text-gray">
					<category :list="categorys" v-model="currentCategory"></category>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title cuIcon-fork text-purple">产品型号</view>
				<input placeholder="请输入产品型号" v-model="record.model"></input>
			</view>
			<view class="cu-form-group">
				<view class="title cuIcon-sponsorfill text-cyan">授权门店</view>
				<view class="action text-gray">
					{{record.distributorName}}
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title cuIcon-repairfill text-orange">施工日期</view>
				<picker mode="date" :value="record.buildDate" start="2015-01-01" @change="buildDateChange">
					<view class="picker text-gray">
						{{record.buildDate ? record.buildDate : "请选择施工日期"}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group ">
				<view class="title cuIcon-attentionfill text-red">质保到期</view>
				<picker mode="date" :value="record.qaDate" start="2015-01-01" @change="qaDateChange">
					<view class="picker text-gray">
						{{record.qaDate ? record.qaDate : "请选质保到期日"}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group ">
				<view class="title cuIcon-rechargefill text-olive">价格</view>
				<input placeholder="请输入价格" v-model="record.price"></input>
			</view>
			<view class="cu-form-group">
				<view class="title cuIcon-camerafill text-black">施工照片</view>
				<view class="action text-gray">
					{{buildImgs.length}}/3
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img margin-sm" v-for="(item,index) in buildImgs" :key="index"
						@tap="viewImage" :data-url="index">
						<image :src="buildImgs[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg" :data-index="index">
							<text class='cuIcon-close text-gray'></text>
						</view>
					</view>
					<view class="solids margin-sm" @tap="chooseImage" v-if="buildImgs.length < 3">
						<text class='cuIcon-cameraadd text-gray'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group align-start ">
				<view class="title cuIcon-form text-blue">备注</view>
				<textarea maxlength="-1" class="text-gray" v-model="record.des" placeholder="请输入备注"></textarea>
			</view>
			<view class="padding flex flex-direction bg-white">
				<button @tap="submit" class="cu-btn bg-color text-color lg">提交</button>
			</view>
		</form>
	</scroll-view>
</template>

<script>
	let COS = require("../../wx-cos/cos-wx-sdk-v5.min.js");

	export default {
		data: function() {
			return {
				distributorIndex: -1,
				categorysIndex: -1,
				record: {
					name: "",
					tel: "",
					carType: "",
					carNumber: "",
					vin: "",
					distributorId: 1,
					distributorName: "",
					categorys: "",
					scrollNumber: "",
					buildDate: "",
					qaDate: "",
					price: "",
					model: "",
					des: "",
				},
				buildImgs: [],
				buildFiles: [],
				categorys: [],
				currentCategory: {},
			};
		},
		onLoad: function() {
			let self = this;
			this.record.distributorId = this.store.state.distributor.distributorId;
			this.record.distributorName = this.store.state.distributor.name;
			this.http.get({
				url: "/category/sub",
				param: {
					categoryId: 0
				}
			}).then(function(res) {
				self.categorys = res;
			});
		},
		methods: {
			buildDateChange: function(e) {
				this.record.buildDate = e.detail.value;
				console.log(this.record.buildDate);
			},
			qaDateChange: function(e) {
				this.record.qaDate = e.detail.value;
				console.log(this.record.qaDate);
			},
			chooseImage() {
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res);
						if (this.buildImgs.length != 0) {
							this.buildImgs = this.buildImgs.concat(res.tempFilePaths);
						} else {
							this.buildImgs = res.tempFilePaths;
						}
					}
				});

			},
			delImg(e) {
				uni.showModal({
					title: '施工照片',
					content: '确定要删除这个图片吗？',
					cancelText: '等一下',
					confirmText: '是的',
					success: res => {
						if (res.confirm) {
							this.buildImgs.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			viewImage(e) {
				uni.previewImage({
					urls: this.buildImgs,
					current: this.buildImgs[e.currentTarget.dataset.url]
				});
			},
			treeToArray: function(targetCategory, array) {
				let category = {};
				category.categoryId = "■"+targetCategory.categoryId+"■";
				category.name = "■"+targetCategory.name+"■";
				array.push(category);
				if (JSON.stringify(targetCategory.subTarget) !== "{}") {
					array = this.treeToArray(targetCategory.subTarget, array);
				}
				return array;
			},
			uploadImgFile: function() {
				
				let self = this;
				
				return new Promise(function(resolve, reject) {
					let cos = new COS({
						SecretId: 'AKIDwhBPN4UdXCcldEYcPwCBtMXR4PUJr8By',
						SecretKey: 'YopY0BD5h25rMaXDdsrZ0A3ey1nIWT9X',
					});
					
					for (let index in self.buildImgs) {
						let item = self.buildImgs[index];
						let fileFullName = item.replace(/\\|\//g, "");
						
						let name = (new Date()).valueOf() + fileFullName.split("tmp")[1];
						uni.showLoading({
							title: '图片上传中',
							mask: true
						});
						cos.postObject({
						    Bucket: 'temp-1308528568',
						    Region: 'ap-beijing',
						    Key: name,
						    FilePath: item, // wx.chooseImage 选择文件得到的 tmpFilePath
						    onProgress: function(progressData) {
						        console.log(JSON.stringify(progressData));
						    }
						}, function (err, data) {
							uni.hideLoading();
							if (err) {
								self.message.error("上传图片失败");
							} else {
								self.buildFiles.push(data.Location);
								if (self.buildImgs.length === self.buildFiles.length) {
									resolve(self.buildFiles);
								}
							}
							
						});
					}
					
				});
			},
			submit: function() {
				let self = this;
				
				if (this.util.isEmptyString(this.record.name)) {
					this.message.warning("请输入客户姓名");
					return;
				}
				
				if (this.util.isEmptyString(this.record.tel)) {
					this.message.warning("请输入客户电话");
					return;
				}
				
				if (this.util.isEmptyString(this.record.carType)) {
					this.message.warning("请输入车辆型号");
					return;
				}
				
				if (this.util.isEmptyString(this.record.carNumber)) {
					this.message.warning("请输入车牌号");
					return;
				}
				
				if (this.util.isEmptyString(this.record.vin)) {
					this.message.warning("请输入车架号");
					return;
				}
				
				if (this.util.isEmptyString(this.record.buildDate)) {
					this.message.warning("请选择施工日期");
					return;
				}
				
				

				if (this.util.isEmptyString(this.record.qaDate)) {
					this.message.warning("请选择质保到期日期");
					return;
				}
				
				if (this.util.isEmptyString(this.record.price)) {
					this.message.warning("请输入价格");
					return;
				}
				
				let array = [];
				let categoryArray = this.treeToArray(this.currentCategory, array);
				this.record.categorys = JSON.stringify(categoryArray);
				
				if (this.buildImgs.length === 0) {
					this.message.warning("请上传施工图片");
					return;
				} else if (this.buildImgs.length > 3) {
					this.message.warning("施工图片最多只能上传3图");
					return;
				}

				this.uploadImgFile().then(function(res) {
					self.record.buildFilesJsonString = JSON.stringify(self.buildFiles);
					if (self.record.qaDate.length < 19) {
						self.record.qaDate += " 23:59:59";
					}
					
					if (self.record.buildDate.length < 19) {
						self.record.buildDate += " 23:59:59";
					}
					self.http.post({
						url: "/record/info",
						param: self.record
					}).then(function(res) {
						self.message.confirm({
							title: "提示",
							message: "录入成功",
							success: function() {
								uni.navigateBack({
									
								});
							}
						});
					});
				});
				
				return;
				
				
			},
		}
	}
</script>

<style>
	.cu-form-group .title {
		font-size: 30rpx;
	}
</style>
